
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title id="divTitle"> 添加书籍 </title>
    <link rel="stylesheet" type="text/css" href="/css/style.css" />

    <style type="text/css">
        *, body {
            margin: 0px;
            font-family: '微软雅黑',serif;
        }
    </style>
    <script src="/js/jquery-1.10.2.min.js"></script>
    <script src="/js/jquery.form.js"></script>
    <script src="/js/generic.js"></script>

    <script type="text/javascript" src="/js/EasyUI/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="/js/EasyUI/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="/js/EasyUI/jquery.fileupload.js"></script>
    <script type="text/javascript" src="/js/EasyUI/jquery.fileupload-process.js"></script>
    <script type="text/javascript" src="/js/EasyUI/jquery.fileupload-validate.js"></script>
    <script type="text/javascript" src="/js/EasyUI/jquery.fileupload-ui.js"></script>
    <script type="text/javascript">
    </script>
</head>

<body>

    <table class="maintable">
        <tr>
            <td class="rightmaintd" valign="top">
                <div style="width:920px;margin:10px auto;"> <a href="/book">&lt;  返回</a> </div>
                <table class="logintable" cellpadding="8" style="margin-top:20px;" >
                    <tr>
                        <td width="100">书名</td>
                        <td><input type="text" id="name" class="logininput" name="name" th:value="${book.getName()}"></td>
                    </tr>
                    <tr>
                        <td>作者</td>
                        <td><input type="text" id="author" class="logininput" name="author" th:value="${book.getAuthor()}"></td>
                    </tr>
                    <tr>
                        <td>出版社</td>
                        <td><input type="text" id="publisher" class="logininput" name="publisher" th:value="${book.getPublisher()}"></td>
                    </tr>
                    <tr>
                        <td>版次</td>
                        <td><input type="text" id="edition" class="logininput" name="edition" th:value="${book.getEdition()}"></td>
                    </tr>
                    <tr>
                        <td>出版时间</td>
                        <td><input type="text" id="editionTime" class="logininput" name="editionTime" th:value="${book.getEditionTime()}"></td>
                    </tr>
                    <tr>
                        <td>ISBN</td>
                        <td><input type="text" id="isbn" class="logininput" name="isbn" th:value="${book.getIsbn()}"></td>
                    </tr>
                    <tr>
                        <td>医家</td>
                        <td><input type="text" id="medicalDoctor" class="logininput" name="medicalDoctor" th:value="${book.getMedicalDoctor()}"></td>
                    </tr>
                    <tr>
                        <td valign="top">封面</td>
                        <td>
<!--                            <img src="/images/userhead.png" id="img4" alt="" class="userheadpic"> <br />-->
                            <img th:src="@{/loadImages/{fileName}(fileName=${book.getBookCoverName()})}"  id="img4" alt="" class="userheadpic"
                                 onerror="this.onerror=null; this.src='/images/userhead.png';"> <br />
                            <div class="fileUpload">
                                <span id="spSmallImage4">上传封面</span>
                                <input type="file" id="smallfile4" name="smallfile4" class="upload" accept="image/*" onchange="previewImageCover()"/>
                                <input type="hidden" id="hidSmallPic4" value="" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">版权页</td>
                        <td>
<!--                            <img src="/images/userhead.png" id="img5" alt="" class="userheadpic"> <br />-->
                            <img th:src="@{/loadImages/{fileName}(fileName=${book.getCopyRightMapName()})}"  id="img5" alt="" class="userheadpic"
                                 onerror="this.onerror=null; this.src='/images/userhead.png';"> <br />
                            <div class="fileUpload">
                                <span id="spSmallImage5">上传版权页</span>
                                <input type="file" id="smallfile5" name="smallfile5" class="upload" accept="image/*" onchange="previewImageRight()"/>
                                <input type="hidden" id="hidSmallPic5" value="" />
                            </div>
                        </td>
                    </tr>
                    <tr style="float: left">
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                        <td><input type="button" value="保&nbsp;&nbsp;存" class="denglubtn" id="Sbutton" onclick="save()">  </td>
                        <td><input type="text" name="id" id="Id" class="shownone" th:value="${book.getId()}"/></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

</body>
</html>
<script type="text/javascript">
    function previewImageCover() {
        var preview = document.getElementById('img4');
        var fileDom = document.getElementById('smallfile4');
        // 获取得到file 对象
        var file = fileDom.files[0]
        // 限制上传图片的大小
        if(file.size > 1024 * 1024 * 5) {
            alert('图片大小不能超过 5MB!');
            return false;
        }
        // 创建url
        var imgUrl = window.URL.createObjectURL(file)
        preview.setAttribute("src", imgUrl)
        // 更改img url 以后释放 url
        preview.onload = function() {
            console.log('图片1加载成功')
            URL.revokeObjectURL(imgUrl)//安全性，释放URL
        }
    }
    function previewImageRight() {
        var preview = document.getElementById('img5');
        var fileDom = document.getElementById('smallfile5');
        // 获取得到file 对象
        var file = fileDom.files[0]
        // 限制上传图片的大小
        if(file.size > 1024 * 1024 * 5) {
            alert('图片大小不能超过 5MB!');
            return false;
        }
        // 创建url
        var imgUrl = window.URL.createObjectURL(file)
        preview.setAttribute("src", imgUrl)
        // 更改img url 以后释放 url
        preview.onload = function() {
            console.log('图片2加载成功')
            URL.revokeObjectURL(imgUrl)//安全性，释放URL
        }
    }
    function save(){
        var name = document.getElementById('name').value;
        if(name==""){
            alert("请输入书名！");
            return;
        }
        var id=document.getElementById('Id').value;
        var author = document.getElementById('author').value;
        if(author=="")
            author=null;
        var publisher=document.getElementById('publisher').value;
        if(publisher=="")
            publisher=null;
        var edition = document.getElementById('edition').value;
        if(edition=="")
            edition=null;
        var editionTime = document.getElementById('editionTime').value;
        if(editionTime=="")
            editionTime=null;
        var isbn = document.getElementById('isbn').value;
        if(isbn=="")
            isbn=null;
        var medicalDoctor=document.getElementById('medicalDoctor').value;
        if(medicalDoctor=="")
            medicalDoctor=null;
        // 创建要发送的数据对象，不包括文件
        var data = {
            id: id,
            name: name,
            author: author,
            publisher: publisher,
            edition: edition,
            editionTime: editionTime,
            isbn: isbn,
            medicalDoctor: medicalDoctor
        };
        console.log(data);
        var formData =new FormData();
        formData.append('book',JSON.stringify(data));
        formData.append('imageCover', document.getElementById('smallfile4').files[0]);
        formData.append('imageRight', document.getElementById('smallfile5').files[0]);
        // 发送 POST 请求
        fetch('/book/', {
            method: 'PUT',
            body: formData,
        })
            .then(response => response.json())
            .then(() => {
                alert("修改成功！");
                window.location.href="/book";
            })
            .catch(error => {
                console.log(error);
                alert("修改成功！");   //其实这个是有问题的，但是能正常创建
                window.location.href="/book";
            });

    }

</script>